iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
Modern Web

重新認識 Flex 和 Grid系列 第 20

[Day20] grid-template 屬性之 areas

  • 分享至 

  • xImage
  •  

雖然說網格線會隨著網格項目自動生成,但既然要使用網格系統,就要了解怎麼操控網格線,才能劃出各種多變的網格區域,然而畫網格線有很多種做法,且每種做法的語法也不同,怎麼利用 grid-template (網格樣板) 使用得當是一個難題。

.container {
    grid-template: 
        none | 
        [<grid-template-rows> / <grid-template-columns>] |
        [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?;
}
預設:none

詳細使用方法種類見:
1.MDN
2.W3C


grid-template-areas

.container {
    grid-template-areas: none | <string> ;
}
預設:none

英文小幫手:

grid-template 網格樣板
string 字串,之所以是字串,是因為可以利用文字與文字間的空白來形容網格的內容填充方式,我覺得這是個蠻有趣的設計


放置網格區域

利用隨意的字串定義網格樣板,每個字串代表一行,字串內的每個文字識別為占有一格,只要相鄰的文字相同(不限是否在同字串)且合併後會能成為"矩形"才有辦法合併,如果不是矩形則 grid-template-areas 宣告無效。這個方法非常適合有多個重複的命名區域。

區域字串命名的規則可以依個人喜好(連 emoji. 都可以),另外可以利用 ... 來代表沒被命名的剩下區域。

.container{
  grid-template-areas:
  "h h h h"
  "l c c r"
  "l l f f";
}
/* 此處的 l 為 L形 而非矩形,為無效的宣告! */
.container{
  grid-template-areas:
  "h h h h"
  "l c c r"
  "l f f f";
}
/*結果類似於以下 (除了中間部分未予以命名) */
.container{
  grid-template-areas:
  "header header header header"
  "left   ...    ...    right"
  "left   footer footer footer";
}

https://ithelp.ithome.com.tw/upload/images/20201005/20128346eLj7MSpFPM.png

現在可能還看不太出來網格名稱的相關性,不過之後會有可以使用網格名稱來放置網格項目的屬性。(如 grid-row/grid-column)

網格線會自動命名

當完成網格區域定義後,也就意味著網格線的名稱也跟著被 -start-end 定義,而線段的名稱會跟隨區域的名稱,以 h 的區域為例,它的起始網格線(最左邊)為 h-start 結束(最右邊)為 h-end

因為網格線的特性就是可以持續地疊加,所以要在設定尺寸時另外命名還是可以的。

搭配網格線軌道尺寸

網格區域宣告後,便可搭配 grid-template-rowgrid-template-column 來定義尺寸。

.container{
  grid-template-areas:
  "h h h h"
  "l c c r"
  "l f f f";
  grid-template-columns: 1fr 20em 20em 1fr;
  grid-template-rows: 40px 10em 3em;
}

有趣是自動命名的特性能夠被反向利用,當沒有使用 grid-template-areas 時,只要命名的方式符合 areas 的規則,就會變成和 grid-template-areas 一樣的結果。然而這個方法還是得看狀況使用,不然既難以編寫又可讀性差,且可能一不小心命名相同或少命名某個線段而出現不可預期的結果。

.container{
  grid-template-columns:
    [h-start l-start] 1fr [l-end f-start] 20em 20em [r-start] 1fr [h-end l-end f-end];
  grid-template-rows:
    [h-start] 40px [h-end l-start r-start] 10em [f-start r-end] 3em [f-end l-end];
}
/* 等同於上一個範例,使用 grid-template-areas 網格區域清楚很多*/

超出areas的尺寸

當定義的尺寸區域多餘 areas 所放置的區域,就會在原本網格往外加網格區域,網格項目預設還是會照著順序放置

.container{
  grid-template-areas:
  "h h h h"
  "l c c r"
  "l f f f";
  grid-template-columns: 1fr 50px 50px 1fr 1fr; /*第五列1fr會向右凸出 area 定義的區域(和其他 1fr 一樣寬)*/
  grid-template-rows: 60px 100px 3rem 20px; /*第四行20px會向下凸出 area 定義的區域*/
}

https://ithelp.ithome.com.tw/upload/images/20201005/20128346eqjuqelH5Z.png


資料來源:


上一篇
[Day19] grid-template 屬性之 rows/columns
下一篇
[Day21] grid-auto 屬性之 flow
系列文
重新認識 Flex 和 Grid30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言